<template>
  <chartTemplate
    ref="chartTemplate"
    :option="option"
    @getChartInstance="getChartInstance"
  ></chartTemplate>
</template>
<script>
import { mapState } from 'vuex'
import chartTemplate from '@/assets/js/common/chartTemplatePlugin/chartTemplate'
export default {
  name: 'homeLeftCenter',
  data() {
    return {
      yAxis: [],
      seriesData: [],
      legend: [],
      gap: 28,
      radius: [75, 62],
      center: ['50%', '56%'],
      color: ['rgba(35,220,247,1)', 'rgba(246,162,63,1)'],
      objData: {},
      option: {}
    }
  },
  props: {
    params: {
      type: Object,
      default: () => {}
    }
  },
  mounted() {},
  computed: {
    ...mapState(['dataSet'])
  },
  watch: {
    params: {
      handler: function (v, v1) {
        // this.init()
      }
    }
  },
  methods: {
    init() {
      this.handleData()
      this.option = this.getOption()
      let tl = new TimelineMax({})
      tl.addLabel('start').add(this.$refs.chartTemplate.init(), 'start')
      return tl
    },
    getOption() {
      let option = {
        tooltip: {
          show: false
        },
        title: {
          text: this.params.name,
          left: '41%',
          top: '47%',
          textStyle: {
            color: '#fff',
            fontFamily: 'YouSheBiaoTiHei',
            fontSize: 16,
            fontWeight: 'normal'
          }
        },
        grid: {
          bottom: 50,
          top: 50,
          right: 10
        },
        legend: {
          right: 15,
          top: 20,
          itemWidth: 0,
          itemHeight: 0,
          itemGap: 2,
          selectedMode: false,
          formatter: (name) => {
            return (
              '{name|占' +
              name +
              '}{value|' +
              (this.objData[name].value * 100).toFixed(0) +
              '%}'
            )
          },
          textStyle: {
            fontWeight: 'normal',
            textBorderWidth: 0,
            rich: {
              name: {
                fontSize: 12,
                color: 'rgba(255,255,255,.7)',
                fontFamily: 'H_Regular',
                textBorderColor: 0
              },
              value: {
                fontSize: 16,
                color: 'rgba(255,255,255,1)',
                fontFamily: 'D-DIN-Bold',
                padding: [0, 0, 0, 10],
                fontWeight: 'normal',
                textBorderColor: 0
              }
            }
          }
        },
        series: this.seriesData
      }
      return option
    },
    handleData() {
      let arr = [...this.params.list],
        seriesData = []
      this.objData = this.array2obj(arr, 'name')
      for (let i = 0; i < arr.length; i++) {
        seriesData.push({
          name: '',
          type: 'pie',
          clockwise: false,
          silent: true,
          radius: [
            this.radius[0] - i * this.gap + '%',
            this.radius[1] - i * this.gap + '%'
          ],
          center: this.center,
          label: {
            show: false
          },
          data: [
            {
              value: arr[i].value * 0.75,
              name: arr[i].name,
              itemStyle: {
                color: this.color[i]
              }
            },
            {
              value: 1 - arr[i].value * 0.75,
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)'
              }
            }
          ]
        })
        seriesData.push({
          name: '',
          type: 'pie',
          silent: true,
          z: 1,
          clockwise: false, //顺时加载
          radius: [
            this.radius[0] - i * this.gap + '%',
            this.radius[1] - i * this.gap + '%'
          ],
          center: this.center,
          label: {
            show: false
          },
          data: [
            {
              value: 7.5,
              itemStyle: {
                color: 'rgba(255,255,255,0.1)' //圆环颜色
              }
            },
            {
              value: 2.5,
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)'
              }
            }
          ]
        })
      }

      this.seriesData = seriesData
    },
    fomatterNum(num) {
      if (typeof num === 'number') {
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      } else {
        return '-'
      }
    },
    getChartInstance(chart) {
      // if(chart){
      //   setInterval(() => {
      //     if(this.tooltipIndex > this.params.length - 1){this.tooltipIndex = -1; }else {this.tooltipIndex++}
      //     chart.dispatchAction({
      //       type: "showTip",
      //       seriesIndex: 0,
      //       dataIndex: this.tooltipIndex
      //     })
      //     if(this.tooltipIndex > 0){
      //       // chart.dispatchAction({
      //       //   type: "hideTip",
      //       //   dataIndex: this.tooltipIndex - 1
      //       // })
      //     }
      //   }, 5000)
      // }
    },
    array2obj(array, key) {
      var resObj = {}
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i]
      }
      return resObj
    }
  },
  components: { chartTemplate }
}
</script>
<style lang="scss">
.scatter-hover-bg {
  position: absolute;
  width: 200px;
  height: 100px;
  background: linear-gradient(
    to right,
    rgba(5, 37, 95, 0.8),
    rgba(5, 37, 95, 0)
  );
  border-width: 0 !important;
  border-left: 2px solid rgba(50, 76, 237, 1) !important;
  display: none;
  border-radius: 0 !important;
  box-shadow: rgb(0 0 0 / 0%) 1px 2px 10px !important;
}
</style>
